<style scoped>

</style>

<template>
    <div id="mailDetail">
        <el-form ref="form" :model="form" label-position="left" label-width="80px" v-loading="loading">
            <el-form-item label="发送邮件">
                <el-select v-model="form.mail.mailBoxName" placeholder="请选择">
                    <el-option  v-for="item in mailBoxList" :key="item.mailBoxName" :label="item.mailBoxName" :value="item.mailBoxName"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="邮件标题">
                <el-input v-model="form.mail.title"></el-input>
            </el-form-item>
            <el-form-item label="收件人">
                <el-input v-model="form.mail.toUser"></el-input>
            </el-form-item>
            <el-form-item label="抄送">
                <el-input v-model="form.mail.ccUser"></el-input>
            </el-form-item>
            <el-form-item label="密送">
                <el-input v-model="form.mail.ssUser"></el-input>
            </el-form-item>
            <el-form-item label="邮件内容">
                <quill-editor v-model="form.mail.htmlContent" ref="myQuillEditor" @change="onEditorChange($event)"></quill-editor>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">发送</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'MailDetail',
    data() {
        return {
           form:{
               mail:{
                   mailBoxName:'',
                   title:'',
                   toUser:'',
                   ccUser:'',
                   ssUser:'',
                   htmlContent:''
               }
           },
           mailBoxList:[],
           loading:false
        }
    },
    mounted: function () {
        this.getMailBoxList();
    },
    // if you need to manually control the data synchronization, parent component needs to explicitly emit an event instead of relying on implicit binding
    // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
    methods: {
        onEditorChange({ editor, html, text }) {
            this.content = html
        },
        getMailBoxList:function(){
                this.$http.get('mailBox/all').then(res=>{
                    this.mailBoxList = res.data.returnData;
                });
        },
        onSubmit:function(){
            console.log("发送邮件...");
            let formMail = this.form.mail;
            console.log(formMail);
            //收件人列表
            let toUserArray = formMail.toUser.split(",");
            let ccUserArray = formMail.ccUser.split(",");
            let bccUserArray = formMail.ssUser.split(",");

            var mailObj = {
                "mail": {
                    "attachmentList": [],
                    "toUsers": toUserArray,
                    "bccUsers": [],
                    "ccUsers": [],
                    "content": "",
                    "fromUser": formMail.mailBoxName,
                    "html": formMail.htmlContent,
                    "subject": formMail.title
                },
                "mailBox": formMail.mailBoxName
            }
            this.loading = true;
            this.$http.post("mail/send",mailObj,{headers: {"Content-Type": "application/json"}}).then(res=>{
                console.log("发送结果："+JSON.stringify(res.data));
                if(res.data.returnCode == '0'){
                    this.loading = false;
                    alert('邮件任务已提交.');
                }
            }).catch(function (error) {
                this.loading = false;
                alert("提交邮件任务发生错误："+error);
            });
        }
    },
    // get the current quill instace object.
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill
        }
    }
}
</script>